<template>
    <!-- 账簿-科目余额表 -->
    <section class="content-box">
    	<div>
        <!--工具条-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form style="display:flex;line-height:5px;justify-content: space-between;">
                <h1>账簿-科目余额表</h1>
                <el-form-item>
                    <el-button type="primary" @click="chaxun()">
                        <i class="el-icon-check" ></i> 显示查询
                    </el-button>
                    <a class="wml" @click="export2Excel">导出</a>
                </el-form-item>
            </el-form>
        </el-col>
        <!-- 表格 -->
        <el-table ref="singleTable" :data="tableData" @row-dblclick='abmoA' border highlight-current-row  max-height="700"  style="width: 100%">
			<el-table-column property="AccountItem" label="科目代码" width="120" header-align="center">
			</el-table-column>
			<el-table-column property="ItemName" label="科目名称" width="300" show-overflow-tooltip header-align="center">
			</el-table-column>
			<el-table-column  label="期初余额" header-align="center">
				<el-table-column property="BeginBalanceJie" label="借方" :formatter="dealF" header-align="center" align="right">
				</el-table-column>
				<el-table-column property="BeginBalanceDai" label="贷方" :formatter="dealF" header-align="center" align="right">
				</el-table-column>
			</el-table-column>
			<el-table-column  label="本期发生" header-align="center">
				<el-table-column property="TotalJie" label="借方" :formatter="dealF" header-align="center" align="right">
				</el-table-column>
				<el-table-column property="TotalDai" label="贷方" :formatter="dealF" header-align="center" align="right">
				</el-table-column>
			</el-table-column>	
			<el-table-column  label="本年累计" header-align="center">
				<el-table-column property="YearTotalJie" label="借方" :formatter="dealF" header-align="center" align="right">
				</el-table-column>
				<el-table-column property="YearTotalDai" label="贷方" :formatter="dealF" header-align="center" align="right">
				</el-table-column>
			</el-table-column>
			<el-table-column  label="期末余额" header-align="center">
				<el-table-column property="EndBalanceJie" label="借方" :formatter="dealF" header-align="center" align="right">
				</el-table-column>
				<el-table-column property="EndBalanceDai" label="贷方" :formatter="dealF" header-align="center" align="right">
				</el-table-column>
			</el-table-column>
		</el-table>
        <!-- 隐藏页面 -->
        <el-dialog title="查询条件" :visible.sync="dialogFormVisible" size="small" :modal-append-to-body="false">
		  <div style="padding: 0px 3%;margin-bottom: 20px;">
		  	<span>期&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;间：</span>
                <el-select v-model="Fu" @change="changeF(Fu)" placeholder="请选择" style="width: 39%;">
                    <el-option v-for="item in Fu_Date" :key="item.Code" :label="item.Name" :value="item.Code">
                    </el-option>
                </el-select>
            <span style="margin-left: 10px;">至：</span>
                <el-select v-model="Yu" @change="changeY(Yu)" placeholder="请选择" style="width: 39%;">
                    <el-option v-for="item in Yu_Date" :key="item.Code" :label="item.Name" :value="item.Code">
                    </el-option>
                </el-select>
           	</div>
           	<div style="padding: 0px 3%;margin-bottom: 20px;">
		  	<span>会计科目：</span>
                <template>
				  <el-select v-model="value8" filterable placeholder="请选择" @change="change8(value8)" style="width: 39%;">
				    <el-option
				      v-for="item in options"
				      :key="item.value"
				      :label="item.label"
				      :value="item.value"
				      >
				    </el-option>
				  </el-select>
				</template>
			<span style="margin-left: 10px;">至：</span>
                <template>
				  <el-select v-model="value9" filterable placeholder="请选择" @change="change9(value9)" style="width: 39%;">
				    <el-option
				      v-for="item in options9"
				      :key="item.value"
				      :label="item.label"
				      :value="item.value"
				      >
				    </el-option>
				  </el-select>
				</template>
			</div>
			<div style="padding: 0px 3%;">
			<el-checkbox v-model="checked" @change="changeAAA(checked)">仅显示末级科目</el-checkbox>
			</br>
			</br>
			<el-checkbox v-model="checkedB" @change="changeBBB(checkedB)">包含未记账凭证</el-checkbox>
			</br>
			</br>
			<el-checkbox v-model="checkedC" @change="changeCCC(checkedC)">包含辅助核算</el-checkbox>
		  </div>
		  
		  <div slot="footer" class="dialog-footer">
		    <el-button @click="dialogFormVisible = false">取 消</el-button>
		    <el-button type="primary" @click="ProfitQueding()">确 定</el-button>
		  </div>
		</el-dialog>
		<!-- 损益判断-->
		<!--明细账查看-->
		<el-dialog :visible.sync="referVisibleA" :modal-append-to-body="false" size="large" >
			<el-table ref="singleTable" :data="tableDataA" @row-dblclick='abmoB'  highlight-current-row max-height="700"  style="width: 100%">
				<el-table-column type="index" width="66">
				</el-table-column>
				<el-table-column property="DocDateStr" label="日期" width="120" >
				</el-table-column>
				<el-table-column property="VoucherCode" label="凭证编号" width="120">
				</el-table-column>
				<el-table-column property="Abstracts" label="摘要" width="400" show-overflow-tooltip>
				</el-table-column>
				<el-table-column property="AccountItemName" label="会计科目" width="300" show-overflow-tooltip>
				</el-table-column>
				<el-table-column property="JieMoney" label="借方" align="right">
				</el-table-column>
				<el-table-column property="DaiMoney" label="贷方" align="right">
				</el-table-column>
				<el-table-column property="BalanceDirection" label="方向">
				</el-table-column>
				<el-table-column property="EndBalance" label="余额" align="right">
				</el-table-column>
			</el-table>
		</el-dialog>
		
		<!--核算明细账查看-->
		<el-dialog :visible.sync="referVisibleC" :modal-append-to-body="false" size="large" >
			<el-table ref="singleTable" :data="tableDataC" @row-dblclick='abmoB'  highlight-current-row max-height="700"  style="width: 100%">
				<el-table-column type="index" width="66">
				</el-table-column>
				<el-table-column label="凭证日期" prop="DocDate" sortable>
		         	
		          </el-table-column>
		          <el-table-column label="凭证编号" prop="DocNO" sortable>
		            
		          </el-table-column>
		          <el-table-column label="摘要" prop="Abstracts" width="600" show-overflow-tooltip>
		            
		          </el-table-column>
		          <el-table-column label="借方"  prop="JieMoney" align="right">
		            
		          </el-table-column>
		          <el-table-column label="贷方" prop="DaiMoney"  align="right">
		            
		          </el-table-column>
		          <el-table-column label="来源单据号" prop="SourceDocNo" >
		            
		          </el-table-column>
			</el-table>
		</el-dialog>
		
		<!--总账凭证查看-->
		<el-dialog :visible.sync="referVisibleB" :modal-append-to-body="false" >
			<span id="linzi">
				总账凭证
			</span>
			<!--model：false 避免出现模态框-->
			<el-col class="toolbar" style="margin-bottom:20px;margin-top: 40px;">
				<el-row type="flex" class="row-bg" justify="space-around">
				  <el-col :span="6">
				  	<span style="float: left;line-height: 36px;">凭证编号：</span>
					<el-input v-model="pzDocNO" :disabled="true" style="width:150px;float: left;"></el-input>
				  </el-col>
				  <el-col :span="6">
				  	<span style="float: left;line-height: 36px;">制单日期：</span>
					<el-input v-model="pzDocDate" :disabled="true" style="width:150px;float: left;"></el-input>
				  </el-col>
				  <el-col :span="6">
				  	<span style="float: left;line-height: 36px;">附件：</span>
					<el-input v-model="value8" :disabled="true" style="width:150px;float: left;"></el-input>
				  </el-col>
				</el-row>
			</el-col>
			<el-table :data="SearList" style="width: 100%">
				<!--查询列表 -->
				<el-table-column type="index" label="序号" width="66"></el-table-column>
				<el-table-column property="VoucherLine_AccountItemName" label="会计科目" header-align="center" width="250px"></el-table-column>
				<el-table-column property="VoucherLine_AssistItemName" label="辅助核算" header-align="center" width="350px" show-overflow-tooltip></el-table-column>
				<el-table-column property="VoucherLine_JieMoney" label="借方" :formatter="dealF"  header-align="center" align="center"></el-table-column>
				<el-table-column property="VoucherLine_DaiMoney" label="贷方" :formatter="dealY"  header-align="center" align="center"></el-table-column>
			</el-table>
			<div id="wang">
				<!--<div style="width:19%;height: 40px;float: left;"></div>-->
				<div style="width:74%;height: 40px;float: left;"><p>合计</p></div>
				<!--<div style="width:19%;height: 40px;float: left;"></div>-->
				<div style="width:13%;height: 40px;float: left;"><p>{{jiefangheji}}</p></div>
				<div style="width:13%;height: 40px;float: left;"><p>{{daifangheji}}</p></div>
			</div>
			<div id="fu">
				<div style="width:15%;height: 66px;float: left;"><p>摘要</p></div>
				<textarea style="width:83%;height: 66px;float: left;" cols="111" rows="6" v-model="pzAbstracts"></textarea>
			</div>
			
			<el-col class="EmPennAge" style="margin-bottom:10px;margin-left: 27px;">
				<el-row :gutter="20">
				  <el-col :span="6">
				  	<span style="float: left;line-height: 36px;">单据类型：</span>
					<el-input v-model="laiyuandan" :disabled="true" style="width:120px"></el-input>
				  </el-col>
				  <el-col :span="6">
				  	<span style="float: left;line-height: 36px;">现金流类型：</span>
					<el-input v-model="xianjinliu" :disabled="true" style="width:120px"></el-input>
				  </el-col>
				  <el-col :span="6">
				  	<span style="float: left;line-height: 36px;">制单：</span>
					<el-input v-model="pzStrCreateBy" :disabled="true" style="width:120px"></el-input>
				  </el-col>
				  <el-col :span="6">
				  	<span style="float: left;line-height: 36px;">记账：</span>
					<el-input v-model="yulanjizhang" :disabled="true" style="width:120px"></el-input>
				  </el-col>
				</el-row>
				<el-row :gutter="20" style="margin-top: 10px;margin-bottom: 10px;">
				  <el-col :span="6">
				  	<span style="float: left;line-height: 36px;">来源单号：</span>
					<el-input v-model="laiyuandanhao" :disabled="true" style="width:120px"></el-input>
				  </el-col>
				  <el-col :span="6">
				  	<span style="float: left;line-height: 36px;">状&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;态：</span>
					<el-input v-model="yulanzhuangtai" :disabled="true" style="width:120px"></el-input>
				  </el-col>
				  <el-col :span="6">
				  	<span style="float: left;line-height: 36px;">出纳：</span>
					<el-input v-model="yulanchuna" :disabled="true" style="width:120px"></el-input>
				  </el-col>
				  <el-col :span="6">
				  	<span style="float: left;line-height: 36px;">审核：</span>
					<el-input v-model="yulanshenhe" :disabled="true" style="width:120px"></el-input>
				  </el-col>
				</el-row>
			</el-col>
		</el-dialog>
		</div>
    </section>
</template>
<script>
import Vue from 'vue'
import axios from "../../../util/axios";
export default {
    name: 'Detalis',
    data() {
        return {
            tableData: [],
            dialogFormVisible:false,
            mcurrentRow: null,
            Period:'',//默认第一个
            options: [],//会计科目集合（起）
	        value8: '',//选择的会计科目（起）
	        options9: [],//会计科目集合（至）
	        value9: '',//选择的会计科目（至）
	        Fu_Date:[],//日期集合（起）
	        Fu:'',//选择的日期（起）
	        Yu_Date:[],//日期集合（至）
	        Yu:'',//选择的日期（至）
	        checked:false,//false传0，true传1
	        checkedB:false,//false传0，true传1
	        checkedC:false,
	        Dnum:'',//会计num（起）
	        Dnum9:'',//会计num（至）
	        num:0,//勾选仅显示末级科目
	        numB:0,//勾选包含未记账凭证
	        numC:0,//勾选包含未记账凭证
	        isdown:'',
	        tableDataA:[],
	        tableDataC:[],
	        referVisibleA:false,
	        referVisibleB:false,
	        referVisibleC:false,
	        pingzhengleixing:'',//预览-凭证类型
	        laiyuandan:'',//预览-来源单据
	        yulanzhuangtai:'',//预览-状态
	        laiyuandanhao:'',//预览-来源单号
	        xianjinliu:'',//预览-现金流类型
	        jiefangheji:'',//预览-借方合计
	        daifangheji:'',//预览-贷方合计
	        xianjinqijian:'',//预览-会计期间
	        yulanchuna:'',//预览-出纳
	        yulanjizhang:'',//预览-记账
	        yulanshenhe:'',//预览-审核
	        AssisC:'',//辅助需要名字
	        AssisList:[],//会计数组
	        options:[],//辅助显示初
	        optionsF:[],//辅助真实
	        SearList: [], //查询单号列表
	        pzDocNO: '', //查询凭证编号
			pzAbstracts: '', //查询凭证摘要
			pzStrCreateBy: '', //查询凭证制单人
			pzDocDate: '',
			OddNumbersA: '', //查询单号
			OddNumbersB: '', //查询单号
        }
    },
    methods: {
		CXAccountItem(){
			axios
			.post("GetSimplifyAccountItemListZ")
			    .then( res=>{
			        console.log(res)
			        console.log(res.length)
			        let Details = []
			        for(let i = 0 ; i<res.length ; i++ ){
			        	let Data = { value: res[i].Code , label: res[i].Code + res[i].FullName}
			        	Details.push(Data)
			        }
			        this.options = Details
			        this.options9 = Details
			        console.log(this.options)
			    })
			    .catch(error=>{
			    	console.log(error);  
			    });		
		},
		change8(e){
			console.log(e)
			this.Dnum = e
		},
		change9(e){
			console.log(e)
			this.Dnum9 = e
		},
	    Fu_GetPeriodList(){//当前期间
				axios
				.post('Fu_GetPeriodList')
				.then(res => {
					console.log(res);
					this.Fu_Date = res;
		            this.Yu_Date = res;
					for(let i = 0 ; i < res.length ; i++){
						if(res[i].IsCurrent ==1){
							this.Fu = res[i].Code
							this.Yu = res[i].Code
						}
					}
				
				})
				.catch(err => {
					console.log(err);
				})
				
		},
	    changeF(e){
	    	console.log(e)
	    },
	    
	    changeY(e){
	    	console.log(e)
	    },
		changeAAA(e){
			console.log(e,'num');
			if(e===true){
				this.num = 1
			}else{
				this.num = 0
			}
		},
		changeBBB(e){
			console.log(e,'numB');
			if(e===true){
				this.numB = 1
			}else{
				this.numB = 0
			}
		},
		changeCCC(e){
			console.log(e,'numC');
			if(e===true){
				this.numC = 1
			}else{
				this.numC = 0
			}
		},
		mingxi(){
			this.dialogFormVisible = true
			
		},
		ProfitQueding(){
			this.dialogFormVisible = false
			console.log(this.Fu)
			console.log(this.Yu)
			console.log(this.Dnum)
			console.log(this.Dnum9)
			console.log(this.num)
			console.log(this.numB)
			console.log(this.numC)
			axios
				.post('GridPageListJ',
				{
	                fromPeriod:this.Fu,
	                toPeriod:this.Yu,
	                beginAccountItem:this.Dnum,
	                endAccountItem:this.Dnum9,
	                onlyLeaf:this.num,
	                includeNotPost:this.numB,
	                includeAssistItem:this.numC
	            })
					.then(res=>{
						console.log("11111111111111111111")
		                console.log(res)
		                this.tableData = res.rows;
		                // this.daochu()
		            }).catch(err => {
		                console.log(err);
		            })
		},
		chaxun(){
			this.dialogFormVisible = true
//			this.value8 = ''
//			this.value9 = ''
//			this.Fu = ''
//			this.Yu = ''
//			this.checked = false
//			this.checkedB = false
//			this.checkedC = false
		},
		// daochu(){
		// 	axios
		// 		.post('GExportData',
		// 		{
	    //             fromPeriod:this.Fu,
	    //             toPeriod:this.Yu,
	    //             beginAccountItem:this.Dnum,
	    //             endAccountItem:this.Dnum9,
	    //             onlyLeaf:this.num,
	    //             includeNotPost:this.numB,
	    //             includeAssistItem:this.numC
	    //         })
		// 		.then(res=>{
		//                 console.log(res)
		//                 //		                this.isdown = "http://192.168.1.169:8098"+res;
		//                 this.isdown = "http://www.zixun020.com/sccw"+res;
		//                 console.log(this.isdown)		                
		//             })
		// 		.catch(err => {
		//                 console.log(err);
		//             })
		// },
		// tishi(){
		// 	this.$message({
		// 		message: "下载中",
		// 		type: 'success'
		// 	});
		// },
		export2Excel() {//导出功能
			　　require.ensure([], () => {
			　　　　const { export_json_to_excel } = require('../../../vendor/Export2Excel');
			　　　　const tHeader = ['科目代码', '科目名称', '借方(期初余额)','贷方(期初余额)','借方(本期发生)','贷方(本期发生)','借方(本年累计)','贷方(本年累计)','借方(期末余额)','贷方(期末余额)'];
			　　　　const filterVal = ['AccountItem', 'ItemName', 'BeginBalanceJie','BeginBalanceDai','TotalJie','TotalDai','YearTotalJie','YearTotalDai','EndBalanceJie','EndBalanceDai'];
			　　　　const list = this.tableData;
			　　　　const data = this.formatJson(filterVal, list);
			　　　　export_json_to_excel(tHeader, data, '账簿-科目余额表excel');
			　　})
			},
		formatJson(filterVal, jsonData) {//导出功能
			　return jsonData.map(v => filterVal.map(j => v[j]))
		},
		abmoA: function(row) { //查询 //GetEntityName    查看凭证内容接口
				console.log(row)
				this.OddNumbersA = row.AccountItem
				console.log(this.OddNumbersA)
				if(this.OddNumbersA){
					axios
					.post('GridPageListJsonZ', {
						fromPeriod:this.Fu,
		                toPeriod:this.Yu,
		                AccountItem:this.OddNumbersA,
		                includeNotPost:this.numB,
					})
					.then(data => {
						console.log(data)
						this.referVisibleA = true;
						this.tableDataA = data;
					})
					.catch(err => {
						console.log(err)
					});
				}else{
					axios
					.post('GetDetailData', {
		                fromPeriod:this.Fu,
		                toPeriod:this.Yu,
		                AccountItem:row.AccountItem2,
		                onlyLeaf:this.num,
		                includeNotPost:this.numB,
		                totalByLevel:3,
		                AssistItem:row.AssistItem,
		            })
					.then(data => {
						console.log(data)
						this.referVisibleC = true;
						this.tableDataC = data;
					})
					.catch(err => {
						console.log(err)
					});
				}
			},
			abmoB: function(row) { //查询 //GetEntityName    查看凭证内容接口
				console.log(row)
				if(row.VoucherCode){
					axios
					.post('GetEntityByFullName', {
						sDocNO: row.VoucherCode
					})
					.then(data => {
							this.referVisibleB = true;
							console.log('查询凭证数据查看查询凭证数据查看', data);
							this.pingzhengleixing = data.strDocType //凭证类型
							this.SearList = data.List_VoucherLine //凭证列表(明细)
							this.pzDocDate = data.Voucher_DocDate.substring(0, 10) //制单日期
							this.pzDocNO = data.Voucher_DocNO //凭证编号
							this.pzAbstracts = data.Voucher_Abstracts //显示摘要
							this.pzStrCreateBy = data.strCreateBy //制单人
							this.laiyuandan = data.strSourceDocType //预览-来源单据类型
							this.yulanzhuangtai = data.strDocStatus //预览-状态
							this.laiyuandanhao = data.Voucher_SourceDocNo //预览-来源单号
							this.xianjinliu = data.strCashFlowItem //预览-现金流类型
							this.jiefangheji = data.TotalJieMoney//预览-借方合计
					        this.daifangheji = data.TotalDaiMoney//预览-贷方合计
							this.xianjinqijian = data.Voucher_AccountPeriod //预览-会计期间
							this.yulanchuna = data.strCashBy //预览-出纳
					        this.yulanjizhang = data.strCashBy//预览-记账
					})
					.catch(err => {
						console.log(err)
					});
				}
				else if(row.DocNO){
					axios
					.post('GetEntityByFullName', {
						sDocNO: row.DocNO
					})
					.then(data => {
							this.referVisibleB = true;
							console.log('查询凭证数据查看查询凭证数据查看', data);
							this.pingzhengleixing = data.strDocType //凭证类型
							this.SearList = data.List_VoucherLine //凭证列表(明细)
							this.pzDocDate = data.Voucher_DocDate.substring(0, 10) //制单日期
							this.pzDocNO = data.Voucher_DocNO //凭证编号
							this.pzAbstracts = data.Voucher_Abstracts //显示摘要
							this.pzStrCreateBy = data.strCreateBy //制单人
							this.laiyuandan = data.strSourceDocType //预览-来源单据类型
							this.yulanzhuangtai = data.strDocStatus //预览-状态
							this.laiyuandanhao = data.Voucher_SourceDocNo //预览-来源单号
							this.xianjinliu = data.strCashFlowItem //预览-现金流类型
							this.jiefangheji = data.TotalJieMoney//预览-借方合计
					        this.daifangheji = data.TotalDaiMoney//预览-贷方合计
							this.xianjinqijian = data.Voucher_AccountPeriod //预览-会计期间
							this.yulanchuna = data.strCashBy //预览-出纳
					        this.yulanjizhang = data.strCashBy//预览-记账
					})
					.catch(err => {
						console.log(err)
					});
				}
			},
			dealF(e,cell,cellValue) {
				console.log("1111111",cellValue)
				if(cellValue == 0){
					return ''
				}else{
					return cellValue
				}	   
			},
			dealY(e,cell,cellValue) {
				console.log("1111111",cellValue)
				if(cellValue == 0){
					return ''
				}else{
					return cellValue
				}	   
			},
    },
    mounted() {
	    this.mingxi()//默认弹窗
	    this.CXAccountItem()//会计科目
	    this.Fu_GetPeriodList()//日期
	}

}
</script>

<style scoped lang="scss">
@import "../../../common/css/index.css";
.wml{
	color: #fff;
    background-color: #20a0ff;
    border-color: #20a0ff;
    font-size: 14px;
    box-sizing: border-box;
    padding: 10px 15px;
    border-radius: 4px;
    margin-left: 11px;
}
.add_btn {
		float: left;
		margin: 10px 0;
	}
	
	.el-dialog--small {
		width: 40%;
	}
	
	.el-dialog__body {
		padding-bottom: 0;
	}
	#linzi{
		position: absolute;
    	left: 44%;
    	font-size: 20px;
    	font-weight: bolder;
	}
	#fu{
		height: 66px;
		margin-top: 10px;
		margin-bottom: 27px;
		p{
			text-align: center;
    		line-height: 66px;
			
		}
	}
	#wang{
		border: 1px solid #dfe6ec;
		height: 40px;
		margin-bottom: 27px;
		border-top: none;
		p{
			text-align: center;
    		line-height: 40px;
			
		}
	}
	
</style>